<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import BarOrLine from '@/components/Echart/Bar/BarOrLine.vue'
import { useFinanceStore } from '@/stores/module/finance'
const homeStore = useFinanceStore() // 创建store实例
const { getProfitYoy } = storeToRefs(homeStore)

const options = reactive({
  name: 'ProfitGrowth',

  xAxis: {
    type: 'category',
    data: getProfitYoy.value.sub_titles,
  },
  data: getProfitYoy.value.info,

})
watch(
  () => getProfitYoy.value,
  () => {
    options.xAxis.data = getProfitYoy.value.sub_titles
    options.data = getProfitYoy.value.info

  },
  { deep: true }
)
</script>
<template>

    <card-box>
      <template v-slot:title v-if="getProfitYoy.title">
        <h1>{{ getProfitYoy.title }}</h1>
      </template>
      <BarOrLine :chart-data="options" v-if="getProfitYoy.info.length" />
      <div v-else class="default-img">
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>

</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;
  font-size: 16px;
  color: #00f6ff;
}
</style>
